<!-- 城市区域选择 -->

<script setup lang="ts">
import { useCascaderAreaData } from "@vant/area-data";
import { CascaderProps, ElCascader } from "element-plus";

const { level = "region" } = defineProps<{
    level?: "province" | "city" | "region";
}>();

const levelIndex = {
    province: 0,
    city: 1,
    region: 2
};

const maxLevelval = levelIndex[level];

/**
 * 根据情况过滤数据
 * @param level number
 * @param nodes 
 */
const filterLeaf = (level = 0, nodes: any[]) => {
    if (level > 1) return nodes;
    return nodes.map((e) => {
        if (level == maxLevelval) {
            e.children = undefined;
        }

        if (e.children) {
            e.children = filterLeaf(level + 1, e.children);
        }
        return e;
    });
};

// 获取
let options = filterLeaf(0, useCascaderAreaData());

const props: CascaderProps = {
    label: 'text', value: 'text',
};
</script>

<template>
    <ElCascader :options="options" :props="props" />
</template>